<template>
  <div class = "list">
    <Content title = "美食">
      <template #content>
          <img src="http://www.atguigu.com/images/index_new/logo.png" alt="" />
      </template>
      <template #default>
          <div>
          <p>美食1</p>
          <p>美食2</p>
          <p>美食3</p>
        </div>
      </template>
    </Content>
     <Content title = "电影">
        <ol>
        <li>战狼1</li>
        <li>战狼2</li>
        <li>战狼3</li>
        <li>战狼4</li>
      </ol>
    </Content>
     <Content title = "游戏">
      <ul>
        <li>DNF1</li>
        <li>DNF2</li>
        <li>DNF3</li>
      </ul>
    </Content>
  </div>
</template>

<script>
import Content from "./Components/Content"
export default {
  name:"App",
  components:{
    Content,
  },
  data() {
    return {
    }
  },

}
</script>

<style scoped>
  .list{
    display: flex;
    justify-content: space-between;
  }
</style>